<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
	<head>
		<meta charset="utf-8" />
		<title>蓝莲花酒店官网 </title>
		<link rel="shortcut icon" th:href="@{/image/hotel.ico}" type="image/x-icon" />
		<link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css" />
		<script src="https://webapi.amap.com/maps?v=1.4.10&key=ccc557b111dd155750089e029fe3126e&plugin=AMap.AdvancedInfoWindow"></script>
		<style type="text/css">
			#container {
				width: 100%;
				height: 100%;
				float: left;
				position: relative;
			}

			.amap-icon img {
				width: 25px;
				height: 34px;
			}

			.info-title {
				color: white;
				font-size: 14px;
				background-color: #ff5000;
				line-height: 26px;
				padding: 0px 0 0 6px;
				font-weight: lighter;
				letter-spacing: 1px
			}

			.info-content {
				font: 13px Helvetica, 'Hiragino Sans GB', 'Microsoft Yahei', '微软雅黑', Arial;
				padding: 4px;
				color: #666666;
				line-height: 30px;
			}

			.info-content img {
				float: left;
				margin: 3px;
			}

			.amap-info-combo .keyword-input {
				height: 25px;
				border-radius: 2px 0 0 2px;
			}
		</style>
	</head>
	<body>
		<!--导航栏-->
		<div th:include="common/header :: html"></div>
		<div  id="container"></div>
	</body>
	<script th:inline="javascript">
        /*<![CDATA[*/
        var contextPath = [[${#request.getContextPath()}]]; //获取当前应用路径
        var hotelList=[[${hotelList}]];
        /*]]>*/
	</script>
	<script type="text/javascript" th:inline="javascript">
        var map = new AMap.Map("container", {resizeEnable: true});
        /**
         * 浏览器定位
         */
        //定位
        map.plugin('AMap.Geolocation', function() {
            geolocation = new AMap.Geolocation({
                enableHighAccuracy: true, //是否使用高精度定位，默认:true
                timeout: 10000, //超过10秒后停止定位，默认：无穷大
                maximumAge: 0, //定位结果缓存0毫秒，默认：0
                convert: true, //自动偏移坐标，偏移后的坐标为高德坐标，默认：true
                showButton: true, //显示定位按钮，默认：true
                buttonPosition: 'LB', //定位按钮停靠位置，默认：'LB'，左下角
                buttonOffset: new AMap.Pixel(10, 20), //定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
                showMarker: true, //定位成功后在定位到的位置显示点标记，默认：true
                showCircle: true, //定位成功后用圆圈表示定位精度范围，默认：true
                panToLocation: true, //定位成功后将定位到的位置作为地图中心点，默认：true
                zoomToAccuracy: false, //定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
                radius: 1000 //范围，默认：500
            });
            map.addControl(geolocation);
            geolocation.getCurrentPosition();
            AMap.event.addListener(geolocation, 'complete', onComplete); //返回定位信息
            AMap.event.addListener(geolocation, 'error', onError); //返回定位出错信息
        });

        //解析定位结果
        function onComplete(data) {
            if(data.status == 1) {
                $("#addressInput").val(data.formattedAddress);
                sessionStorage.setItem("dingWei-lng", data.position.getLng());
                sessionStorage.setItem("dingWei-lat", data.position.getLat());
            }
        }

        var markers = hotelList;
        var infoWindow = new AMap.AdvancedInfoWindow({offset: new AMap.Pixel(0, -30)});
        // 创建一个 Icon
        var startIcon = new AMap.Icon({
            // 图标尺寸
            size: new AMap.Size(30, 34),
            // 图标的取图地址
            image: contextPath + '/image/marker.png',
            // 图标所用图片大小
            imageSize: new AMap.Size(25, 34),
        });
        for(var i = 0, marker; i < markers.length; i++) {
            var marker = new AMap.Marker({
                position: markers[i].position,
                icon: startIcon,
                map: map
            });
            marker.content = '<div class="info-title">'+markers[i].name+'</div><div class="info-content">' +
                '<img style="width: 100px;height: 67px;" src="' + contextPath + '/image/hotel/'+ markers[i].img +'">' +
                '酒店地址：'+markers[i].detailAddress+'<br/>' +
                '<a target="_blank" href= "javascript:void(0);">点击查看酒店详情</a></div>';
            marker.on('click', markerClick);
            marker.emit('click', {target: marker});
        }

        function markerClick(e) {
            infoWindow.setContent(e.target.content);
            infoWindow.open(map, e.target.getPosition());
        }
        map.setFitView();
	</script>
</html>